<!--
 * @description: 
 * @Author: lhr
 * @Date: 2020-12-04 17:11:15
 * @LastEditors: lhr
 * @LastEditTime: 2020-12-11 15:28:37
-->
<template>
  <h2>自定义输入框vmodel</h2>
  <p>vue2 v-model input - {{ value }}</p>
  <model-input v-model="value"></model-input>
  <p>vue3 v-model input - {{ value2 }}</p>
  <model-input3 v-model="value2"></model-input3>
  <hr />
  <h2>自定义多选框vmodel</h2>
  <p>vue2 v-model checkbox - {{ value3 }}</p>
  <model-checkbox v-model="value3"></model-checkbox>
  <p>vue3 v-model checkbox - {{ value4 }}</p>
  <model-checkbox3 v-model="value4"></model-checkbox3> 显示alert
  <hr />
  <h2>自定义组件vmodel</h2>
  <p>vue2 v-model 自定义组件alert - {{ value5 }}</p>
  <button @click="value5 = !value5">显示alert</button>
  <model-alert v-model="value5" :text="value2"></model-alert>
  <p>vue3 v-model 自定义组件alert - {{ value6 }}</p>
  <button @click="value6 = !value6">显示alert</button>
  <model-alert3 v-model="value6" :text="value2"></model-alert3>
  <hr />
  <h2>vue2 自定义组件.sync修饰符（已被废弃）</h2>
  <p>vue2 .sync修饰符 自定义组件alert - {{ value7 }}</p>
  <button @click="value7 = !value7">显示alert</button>
  <!-- <model-alert-sync :visible.sync="value7" :text="value2"></model-alert-sync> -->
  <!-- '.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead -->
  <hr />
  <h2>vue3 v-model:propName 替换vue2 .sync</h2>
  <p>vue3 v-model:propName 自定义组件alert - {{ value8 }}</p>
  <button @click="value8 = !value8">显示alert</button>
  <model-alert-sync v-model:visible="value8" :text="value2"></model-alert-sync>
  <h2>vue3 多个v-model</h2>
  <div>
    <custom-input-mu
      v-model:username="username"
      v-model:password="password"
    ></custom-input-mu>
    <p>{{username}}-{{password}}</p>
  </div>
  <h2>vue3 v-model 自定义修饰符</h2>
  <div>
    <model-input-modify v-model="value9"></model-input-modify>
    <model-input-modify v-model.upper="value10"></model-input-modify>
  </div>
</template>
<script>
import ModelInput from "@/components/ModelInput.vue";
import ModelInput3 from "@/components/ModelInput3.vue";
import ModelCheckbox from "@/components/ModelCheckbox.vue";
import ModelCheckbox3 from "@/components/ModelCheckbox3.vue";
import ModelAlert from "@/components/ModelAlert.vue";
import ModelAlert3 from "@/components/ModelAlert3.vue";
import ModelAlertSync from "@/components/ModelAlertSync.vue";
import CustomInputMu from "@/components/CustomInputMutiple.vue";
import ModelInputModify from "@/components/ModelInputModify.vue";
import { ref } from "vue";
export default {
  components: {
    ModelInput,
    ModelInput3,
    ModelCheckbox,
    ModelCheckbox3,
    ModelAlert,
    ModelAlert3,
    ModelAlertSync,
    CustomInputMu,
    ModelInputModify
  },
  setup() {
    let value = ref("");
    let value2 = ref("");
    let value3 = ref(false);
    let value4 = ref(false);
    let value5 = ref(false);
    let value6 = ref(false);
    let value7 = ref(false);
    let value8 = ref(false);
    let username = ref("");
    let password = ref("");
    let value9 = ref("123abcdABCD");
    let value10 = ref("123abcdABCD");
    return {
      value,
      value2,
      value3,
      value4,
      value5,
      value6,
      value7,
      value8,
      username,
      password,
      value9,
      value10
    };
  },
};
</script>
